<template>
  <view class="res">
    <view class="sreach">
      <uni-easyinput
        class="uni-mt-5"
        suffixIcon="search"
        v-model="value"
        placeholderStyle="font-size:30rpx"
        placeholder="搜索内容"
        @input="searchIpt"
        @iconClick="iconClick"
      ></uni-easyinput>
      <text>取消</text>
    </view>
    <view class="row">
      <view class="area" v-if="showArr.length !== 0">
        <view class="choice" v-for="(item, i) in showArr" :key="item.id">
          <radio-group @change="radioChange">
            <label class="label">
              <radio :checked="current === i" />
              <text>{{ item.name }}</text>
            </label>
          </radio-group>
        </view>
      </view>
      <view v-if="show"> 暂无此人 </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      searchArr: [
        {
          id: 1,
          name: "小张张",
        },
        {
          id: 2,
          name: "白亚丽",
        },
        {
          id: 3,
          name: "张治强",
        },
        {
          id: 4,
          name: "小白白",
        },
        {
          id: 5,
          name: "小丽丽",
        },
        {
          id: 6,
          name: "小丫丫",
        },
      ],
      current: "",
      value: "",
      showArr: [],
      show: false,
    };
  },
  created() {
    // this.showArr = this.searchArr;
  },
  methods: {
    radioChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
    },
    search(val) {
      return this.searchArr.filter((item) => item.name.includes(val));
    },
    iconClick() {
      //   if (this.value !== "") {
      //     this.showArr = this.search(this.value);
      //     console.log(this.showArr.length);
      //     if (this.showArr.length == 0) {
      //       this.show = true;
      //       return;
      //     }
      //     this.show = false;
      //   } else {
      //     this.showArr = [];
      //     console.log("查询条件为空");
      //   }
    },
    searchIpt(e) {
      this.value = e;
      if (this.value !== "") {
        this.showArr = this.search(this.value);
        console.log(this.showArr.length);
        if (this.showArr.length == 0) {
          this.show = true;
          return;
        }
        this.show = false;
      } else {
        this.showArr = [];
        console.log("查询条件为空");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/common.scss";
::v-deep .uni-icons {
  margin-right: 20rpx;
}
::v-deep .is-input-border {
  border: 1rpx solid #d0d6e5;
}

::v-deep .uni-easyinput__content-input {
  font-size: 30rpx;
}
.res {
  .sreach {
    @include compress;
    background-color: #fff;
    display: flex;
    align-items: center;
    text {
      margin-left: 50rpx;
      font-size: 30rpx;
    }
  }
  .row {
    @include compress;
    .area {
      width: 100%;
      //   height: 300rpx;
      background-color: #fff;
      @include compress;
      .choice {
        height: 80rpx;
        border-bottom: 1rpx solid #ebeef5;
        display: flex;
        align-items: center;
        radio {
          margin-right: 30rpx;
        }
      }
    }
  }
}
</style>